JavaScript 基础

2021-03-07 分类于前端作者 Amoniaa ~16.70K 字阅读次

一、简单数据类型

1.声明变量特殊情况

情况	说明	结果
var age ; console.log (age);	只声明不赋值	undefined
console.log(age);	不声明不赋值直接使用	报错
age = 10; console.log (age);	不声明只赋值	10

2.Undefined 和 Null

一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果)

var variable;
console.log(variable); // undefined 
console.log('你好' + variable); // 你好undefined 
console.log(11 + variable); // NaN 
console.log(true + variable); // NaN

一个声明变量给 null 值，里面存的值为空(学习对象时，我们继续研究null)

1
2
3

console.log('你好' + vari); // 你好null 
console.log(11 + vari); // 11 
console.log(true + vari); // 1

3.数据类型转换

使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型。通俗来说，就是把一种数据类型的变量转换成另外一种数据类型。

我们通常会实现3种方式的转换:

转换为字符串类型：变量.toString() String(变量) 变量 + ‘‘
转换为数字型：parseInt(变量) parseFloat(变量) Number(变量) 利用算数运算 - * / 隐式转换
转换为布尔型：Boolean(变量)

二、函数

1.形参和实参

在JavaScript中，形参的默认值是undefined。

实参个数多于形参，只取到形参的个数

实参个数少于形参，多的形参定义为undefined，结果为NaN

2.return 语句

如果函数没有 return ，返回的值是 undefined

return 语句之后的代码不被执行。

return 只能返回一个值。如果用逗号隔开多个值，以最后一个为准。

如果没有return 则返回 undefined

3.arguments 的使用

只有函数才有 arguments对象而且是每个函数都内置好了这个arguments

function fn() {
    // console.log(arguments); // 里面存储了所有传递过来的实参
    // console.log(arguments.length);
    // console.log(arguments[2]);
    // 可以按照数组的方式遍历arguments
    for (var i = 0; i < arguments.length; i++) {
        console.log(arguments[i]);
     }
}
fn(1, 2, 3);
fn(1, 2, 3, 4, 5);

4.伪数组

并不是真正意义上的数组

具有数组的 length 属性
按照索引的方式进行存储的
它没有真正数组的一些方法 pop() push() 等等

5.函数的两中声明方式

利用函数关键字自定义函数(命名函数)
1
2
function fn() {}
fn();

函数表达式(匿名函数)

var 变量名 = function() {};
变量名();

var fun = function(aru) {
    console.log('我是函数表达式');
    console.log(aru);
}
fun('hello world');

(1) fun是变量名不是函数名

(2) 函数表达式声明方式跟声明变量差不多，只不过变量里面存的是值而函数表达式里面存的是函数

(3) 函数表达式也可以进行传递参数

6.变量的作用域

如果在函数内部 没有声明直接赋值的变量也属于全局变量

1
2
3

function fun(aru) {
    num = 20;
}

7.预解析（面试考点）

js引擎运行js 分为两步

(1). 预解析 js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面

(2). 代码执行 按照代码书写的顺序从上往下执行

预解析分为变量预解析（变量提升）和函数预解析（函数提升）

(1) 变量提升 就是把所有的变量声明提升到当前的作用域最前面不提升赋值操作

因此 函数表达式调用必须写在函数表达式的下面

console.log(num); // undefined
var num = 10;
// 相当于执行了以下代码
// var num;
// console.log(num);
// num = 10;

fun(); // 报错
var fun = function() {
    console.log(22);
}
// 相当于执行了以下代码
// var fun;
// fun();
// fun = function() {
//     console.log(22);
// }

(2) 函数提升 就是把所有的函数声明提升到当前作用域的最前面不调用函数

fn(); // 不报错
function fn() {
    console.log(11);
}
// 相当于执行了以下代码
// function fn() {
//     console.log(11);
// }
// fn();

案例：

f1();
console.log(c);
console.log(b);
console.log(a);
function f1() {
    var a = b = c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}
// 以下代码
// function f1() {
//     var a;
//     a = b = c = 9;
//     // 相当于 var  a  = 9; b = 9; c = 9; b 和 c 直接赋值 没有var 声明 当 全局变量看
//     // 集体声明  var a = 9, b = 9, c = 9;
//     console.log(a);
//     console.log(b);
//     console.log(c);
// }
// f1();
// console.log(c);
// console.log(b);
// console.log(a);

//结果：9 9 9 9 9 报错

三、对象

1.对象创建方法

利用对象字面量创建对象

// var obj = {};  // 创建了一个空的对象 
var obj = {
    uname: '张三疯',
    age: 18,
    sex: '男',
    sayHi: function () {
        console.log('hi~');
    }
}

console.log(obj.uname);
console.log(obj['age']);
obj.sayHi();

利用 new Object 创建对象

var obj = new Object(); // 创建了一个空的对象
obj.uname = '张三疯';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function() {
    console.log('hi~');
}

console.log(obj.uname);
console.log(obj['sex']);
obj.sayHi();

利用构造函数创建对象

构造函数名字首字母要大写
构造函数不需要return 就可以返回结果
构造函数的属性和方法前面必须添加 this

function Star(uname, age, sex) {
    this.name = uname;
    this.age = age;
    this.sex = sex;
    this.sing = function (song) {
        console.log(song);
    }
}
var ldh = new Star('刘德华', 18, '男'); // 调用函数返回的是一个对象
// console.log(typeof ldh);
console.log(ldh.name);
console.log(ldh['sex']);
ldh.sing('冰雨');
var zxy = new Star('张学友', 19, '男');
console.log(zxy.name);
console.log(zxy.age);
zxy.sing('李香兰')

2.new关键字执行过程

new 构造函数可以在内存中创建了一个空的对象
this 就会指向刚才创建的空对象
执行构造函数里面的代码给这个空对象添加属性和方法
返回这个对象

3.遍历对象

var obj = {
    name: 'pink老师',
    age: 18,
    sex: '男',
    fn: function() {}
}
// 使用 for in 遍历的对象
// for (变量 in 对象) {

// }
for (var k in obj) {
    console.log(k); // k 变量 输出  得到的是 属性名
    console.log(obj[k]); // obj[k] 得到是 属性值
}

4.内置对象

Math对象

Math数学对象不是一个构造函数，所以不需要new 来调用而是直接使用里面的属性和方法即可

Math.PI //圆周率
Math.floor() //向下取整
Math.ceil() //向上取整
Math.round() // 四舍五入 就近取整 注意 -3.5 结果是 -3
Math.abs() // 绝对值
Math.max() // 求最大值
Math.min() // 求最小值
Math.random() // 返回一个随机的小数  0 =< x < 1
// 得到两个数之间的随机整数 并且 包含这2个整数
function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

Date对象

Date对象是一个构造函数必须使用new 来调用创建我们的日期对象

// 1. 使用Date  如果没有参数 返回当前系统的当前时间
var date = new Date();
console.log(date);
// 2. 参数常用的写法  数字型  2021, 10, 01  或者是 字符串型 '2021-10-1 8:8:8'
var date1 = new Date(2021, 10, 1);
console.log(date1); // 返回的是 11月 不是 10月 
var date2 = new Date('2021-10-1 8:8:8');
console.log(date2);

格式化日期年月日

var date = new Date();
console.log(date.getFullYear()); // 返回当前日期的年  2021
console.log(date.getMonth() + 1); // 月份 返回的月份小1个月   记得月份+1 呦
console.log(date.getDate()); // 返回的是 几号
console.log(date.getDay()); // 3  周一返回的是 1 周六返回的是 6 但是 周日返回的是 0
// 输出 xxxx年 x月 x日 星期x
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var day = date.getDay();
console.log('今天是：' + year + '年' + month + '月' + dates + '日 ' + arr[day]);

格式化日期时分秒

var date = new Date();
console.log(date.getHours()); // 时
console.log(date.getMinutes()); // 分
console.log(date.getSeconds()); // 秒
// 要求封装一个函数返回当前的时分秒 格式 08:08:08
function getTimer() {
    var time = new Date();
    var h = time.getHours();
    h = h < 10 ? '0' + h : h;
    var m = time.getMinutes();
    m = m < 10 ? '0' + m : m;
    var s = time.getSeconds();
    s = s < 10 ? '0' + s : s;
    return h + ':' + m + ':' + s;
}
console.log(getTimer());

获得Date总的毫秒数(时间戳) 不是当前时间的毫秒数而是距离1970年1月1号过了多少毫秒数

// 1. 通过 valueOf()  getTime()
var date = new Date();
console.log(date.valueOf()); // 就是 我们现在时间 距离1970.1.1 总的毫秒数
console.log(date.getTime());
// 2. 简单的写法 (最常用的写法)
var date1 = +new Date(); // +new Date()  返回的就是总的毫秒数
console.log(date1);
// 3. H5 新增的 获得总的毫秒数
console.log(Date.now());

倒计时效果

// 1.核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。
// 2.用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。
// 3.把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）
// 转换公式如下： 
//  d = parseInt(总秒数/ 60/60 /24);    //  计算天数
//  h = parseInt(总秒数/ 60/60 %24)   //   计算小时
//  m = parseInt(总秒数 /60 %60 );     //   计算分数
//  s = parseInt(总秒数%60);            //   计算当前秒数
function countDown(time) {
    var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
    var inputTime = +new Date(time); // 返回的是用户输入时间总的毫秒数
    var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
    var d = parseInt(times / 60 / 60 / 24); // 天
    d = d < 10 ? '0' + d : d;
    var h = parseInt(times / 60 / 60 % 24); //时
    h = h < 10 ? '0' + h : h;
    var m = parseInt(times / 60 % 60); // 分
    m = m < 10 ? '0' + m : m;
    var s = parseInt(times % 60); // 当前的秒
    s = s < 10 ? '0' + s : s;
    return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2019-5-1 18:00:00'));
var date = new Date();
console.log(date);

四、数组

1.创建数组的两种方式

// 1. 利用数组字面量
var arr = [1, 2, 3];
console.log(arr[0]);

// 2. 利用new Array()
// var arr1 = new Array();  // 创建了一个空的数组
// var arr1 = new Array(2);  // 这个2 表示 数组的长度为 2  里面有2个空的数组元素 
var arr1 = new Array(2, 3); // 等价于 [2,3]  这样写表示 里面有2个数组元素 是 2和3
console.log(arr1);

在同一个数组中可以存放任意的数据类型

如：var arr1 = [1, 2, ‘ test’, true];

2.新增数组元素修改length长度

var arr = ['red', 'green', 'blue'];
console.log(arr.length);
arr.length = 5; // 把我们数组的长度修改为了 5  里面应该有5个元素 
console.log(arr);
console.log(arr[3]); // undefined
console.log(arr[4]); // undefined

数组长度可以自动检测里面元素变化

3.冒泡排序

var arr = [4, 1, 2, 3, 5];
for (var i = 0; i <= arr.length - 1; i++) { // 外层循环管趟数 
    for (var j = 0; j <= arr.length - i - 1; j++) { // 里面的循环管 每一趟的交换次数
        // 内部交换2个变量的值 前一个和后面一个数组元素相比较
        if (arr[j] < arr[j + 1]) {
            var temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
        }
    }
}
console.log(arr);

4.检测是否为数组

// (1) instanceof  运算符 它可以用来检测是否为数组
var arr = [];
var obj = {};
console.log(arr instanceof Array);
console.log(obj instanceof Array);
// (2) Array.isArray(参数);  H5新增的方法  ie9以上版本支持
console.log(Array.isArray(arr));
console.log(Array.isArray(obj));

5.添加删除数组元素的方法

push() 在我们数组的末尾添加一个或者多个数组元素

// (1) push 是可以给数组追加新的元素
// (2) push() 参数直接写 数组元素就可以了
// (3) push完毕之后，返回的结果是 新数组的长度 
// (4) 原数组也会发生变化
var arr = [1, 2, 3];
// arr.push(4, 'pink');
console.log(arr.push(4, 'pink'));
console.log(arr);

unshift() 在数组的开头添加一个或者多个数组元素

// (1) unshift是可以给数组前面追加新的元素
// (2) unshift() 参数直接写 数组元素就可以了
// (3) unshift完毕之后，返回的结果是 新数组的长度 
// (4) 原数组也会发生变化
console.log(arr.unshift('red', 'purple'));
console.log(arr);

pop() 可以删除数组的最后一个元素

// (1) pop是可以删除数组的最后一个元素 记住一次只能删除一个元素
// (2) pop() 没有参数
// (3) pop完毕之后，返回的结果是 删除的那个元素 
// (4) 原数组也会发生变化
console.log(arr.pop());
console.log(arr);

shift() 可以删除数组的第一个元素

// (1) shift是可以删除数组的第一个元素 记住一次只能删除一个元素
// (2) shift() 没有参数
// (3) shift完毕之后，返回的结果是 删除的那个元素 
// (4) 原数组也会发生变化
console.log(arr.shift());
console.log(arr);

案例：筛选数组

// 有一个包含工资的数组[1500, 1200, 2000, 2100, 1800]，要求把数组中工资超过2000的删除，剩余的放到新数组里面
var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
    if (arr[i] < 2000) {
        // newArr[newArr.length] = arr[i];
        newArr.push(arr[i]);
    }
}
console.log(newArr);

6.翻转数组

1
2
3

var arr = ['pink', 'red', 'blue'];
arr.reverse();
console.log(arr);

7.数组排序

// 数组排序（冒泡排序）
var arr1 = [13, 4, 77, 1, 7];
arr1.sort(function(a, b) {
    //  return a - b; 升序的顺序排列
    return b - a; // 降序的顺序排列
});
console.log(arr1);

8.获取数组元素索引

// 1. indexOf(数组元素)  作用就是返回该数组元素的索引号 从前面开始查找// // 只返回第一个满足条件的索引号 
// 如果在该数组里面找不到元素，则返回的是 -1  
// var arr = ['red', 'green', 'blue', 'pink', 'blue'];
var arr = ['red', 'green', 'pink'];
console.log(arr.indexOf('blue'));
// 2. lastIndexOf(数组元素)  作用就是返回该数组元素的索引号 从后面开始查找
var arr = ['red', 'green', 'blue', 'pink', 'blue'];
console.log(arr.lastIndexOf('blue')); // 4

案例：数组去重（面试考点）

// 数组去重 ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'] 要求去除数组中重复的元素。
// 1.目标： 把旧数组里面不重复的元素选取出来放到新数组中， 重复的元素只保留一个， 放到新数组中去重。
// 2.核心算法： 我们遍历旧数组， 然后拿着旧数组元素去查询新数组， 如果该元素在新数组里面没有出现过， 我们就添加， 否则不添加。
// 3.我们怎么知道该元素没有存在？ 利用 新数组.indexOf(数组元素) 如果返回时 - 1 就说明 新数组里面没有改元素
// 封装一个 去重的函数 unique 独一无二的 
function unique(arr) {
    var newArr = [];
    for (var i = 0; i < arr.length; i++) {
        if (newArr.indexOf(arr[i]) === -1) {
            newArr.push(arr[i]);
        }
    }
    return newArr;
}
var demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b'])
console.log(demo);

9.数组转换为字符串

// 1. toString() 将数组转换为字符串
var arr = [1, 2, 3];
console.log(arr.toString()); // 1,2,3
// 2. join(分隔符) 
var arr1 = ['green', 'blue', 'pink'];
console.log(arr1.join()); // green,blue,pink
console.log(arr1.join('-')); // green-blue-pink
console.log(arr1.join('&')); // green&blue&pink

五、字符串

1.基本包装类型

为了方便操作基本数据类型，JavaScript 还提供了三个特殊的引用类型:String、Number和 Boolean。基本包装类型就是把简单数据类型包装成为复杂数据类型，这样基本数据类型就有了属性和方法。

// 下面代码有什么问题?
var str = 'andy'; console.log(str.length);
// 按道理基本数据类型是没有属性和方法的，而对象才有属性和方法，但上面代码却可以执行，这是因为 js 会把 基本数据类型包装为复杂数据类型，其执行过程如下 :
// 1. 生成临时变量，把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2. 赋值给我们声明的字符变量
str = temp;
// 3. 销毁临时变量
temp = null;

2.字符串的不可变

指的是里面的值不可变，虽然看上去可以改变内容，但其实是地址变了，内存中新开辟了一个内存空间。

var str = 'abc';
str = 'hello';
// 当重新给 str 赋值的时候，常量'abc'不会被修改，依然在内存中
// 重新给字符串赋值，会重新在内存中开辟空间，这个特点就是字符串的不可变 // 由于字符串的不可变，在大量拼接字符串的时候会有效率问题
var str = '';
for (var i = 0; i < 100000; i++) {
    str += i;
}
console.log(str); // 这个结果需要花费大量时间来显示，因为需要不断的开辟新的空间

3.根据字符返回位置

// str.indexOf('要查找的字符', [起始的位置])
var str = '改革春风吹满地，春天来了';
console.log(str.indexOf('春'));
console.log(str.indexOf('春', 3)); // 从索引号是 3的位置开始往后查找

案例：查找字符串中某个字符出现的位置以及次数（面试考点）

// 查找字符串"abcoefoxyozzopp"中所有o出现的位置以及次数
// 核心算法：先查找第一个o出现的位置
// 然后 只要indexOf 返回的结果不是 -1 就继续往后查找
// 因为indexOf 只能查找到第一个，所以后面的查找，一定是当前索引加1，从而继续查找
var str = "oabcoefoxyozzopp";
var index = str.indexOf('o');
var num = 0;
// console.log(index);
while (index !== -1) {
    console.log(index);
    num++;
    index = str.indexOf('o', index + 1);
}
console.log('o出现的次数是: ' + num);

4.根据位置返回字符

// 1. charAt(index) 
var str = 'andy';
console.log(str.charAt(3));
// 遍历所有的字符
for (var i = 0; i < str.length; i++) {
    console.log(str.charAt(i));
}
// 2. charCodeAt(index)  返回相应索引号的字符ASCII值 目的： 判断用户按下了那个键 
console.log(str.charCodeAt(0)); // 97
// 3. str[index] H5 新增的
console.log(str[0]); // a

案例：判断一个字符串中出现次数最多的字符，并统计其次数（面试考点）

// 有一个对象 来判断是否有该属性 对象['属性名']
var o = {
    age: 18
}
if (o['sex']) {
    console.log('里面有该属性');
} else {
    console.log('没有该属性');
}
// 判断一个字符串 'abcoefoxyozzopp' 中出现次数最多的字符，并统计其次数。
// 核心算法：利用 charAt(） 遍历这个字符串
// 把每个字符都存储给对象， 如果对象没有该属性，就为1，如果存在了就 +1
// 遍历对象，得到最大值和该字符
var str = 'abcoefoxyozzopp';
var o = {};
for (var i = 0; i < str.length; i++) {
    var chars = str.charAt(i); // chars 是 字符串的每一个字符
    if (o[chars]) { // o[chars] 得到的是属性值
        o[chars]++;
    } else {
        o[chars] = 1;
    }
}
console.log(o);
// 2. 遍历对象
var max = 0;
var ch = '';
for (var k in o) {
    // k 得到是 属性名
    // o[k] 得到的是属性值
    if (o[k] > max) {
        max = o[k];
        ch = k;
    }
}
console.log(max);
console.log('最多的字符是' + ch);

5.字符串操作方法

// 1. concat('字符串1','字符串2'....)
var str = 'andy';
console.log(str.concat('red'));

// 2. substr('截取的起始位置', '截取几个字符');
var str1 = '改革春风吹满地';
console.log(str1.substr(2, 2)); // 第一个2 是索引号的2 从第几个开始  第二个2 是取几个字符

// 3. 替换字符 replace('被替换的字符', '替换为的字符')  它只会替换第一个字符
var str = 'andyandy';
console.log(str.replace('a', 'b'));
// 有一个字符串 'abcoefoxyozzopp'  要求把里面所有的 o 替换为 *
var str1 = 'abcoefoxyozzopp';
while (str1.indexOf('o') !== -1) {
    str1 = str1.replace('o', '*');
}
console.log(str1);

// 2. 字符转换为数组 split('分隔符')    前面我们学过 join 把数组转换为字符串
var str2 = 'red,pink,blue';
console.log(str2.split(','));
var str3 = 'red&pink&blue';
console.log(str3.split('&'));

六、简单数据类型与复杂数据类型

1.基本概念

简单类型又叫做基本数据类型或者值类型，复杂类型又叫做引用类型。

值类型：简单数据类型/基本数据类型，在存储时变量中存储的是值本身，因此叫做值类型。包括string ，number，boolean，undefined，null
引用类型：复杂数据类型，在存储时变量中存储的仅仅是地址(引用)，因此叫做引用数据类型。通过 new 关键字创建的对象(系统对象、自定义对象)，如 Object、Array、Date等

注意：简单数据类型 null 返回的是一个空的对象 object

1 2	var timer = null; console.log(typeof timer); //object

2.内存分配

简单数据类型：存放在栈里面里面直接开辟一个空间存放的是值
复杂数据类型：首先在栈里面存放地址十六进制表示然后这个地址指向堆里面的数据真正的对象实例存放在堆空间中

3.参数传递

简单数据类型：函数的形参也可以看做是一个变量，当我们把一个值类型变量作为参数传给函数的形参时，其实是把变量在栈空间里的值复制了一份给形参，那么在方法内部对形参做任何修改，都不会影响到的外部变量。
复杂数据类型：函数的形参也可以看做是一个变量，当我们把引用类型变量传给形参时，其实是把变量在栈空间里保存的堆地址复制给了形参，形参和实参其实保存的是同一个堆地址，所以操作的是同一个对象。

Amoniaa